<template>
  <div class="mod-config">
    <basic-container v-if="shows">
      <navigationZDRW :sign="{ a: false, b: true, c: false }"></navigationZDRW>
      <div class="boxsty zhiBiao ck">
        <div :height="searchheight">
          <span
            style="float: right; margin-top: -30px; cursor: pointer"
            @click="searchchangeadvanced"
            >{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
            <i
              :class="
                searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "
            />
          </span>
          <div v-show="searchadvanced">
            <el-form
              :inline="true"
              :model="dataForm"
              @keyup.enter.native="getDataList()"
              class="form-inline"
            >
              <el-form-item label="任务书名称">
                <el-input
                  v-model="dataForm.workAssignName"
                  placeholder="任务书名称"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人姓名">
                <el-input
                  v-model="dataForm.ryName"
                  placeholder="被考核人姓名"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="被考核人岗位">
                <el-input
                  v-model="dataForm.userZw"
                  placeholder="被考核人岗位"
                  :clearable="true"
                  style="width: 150px"
                ></el-input>
              </el-form-item>
              <el-form-item label="任务书状态">
                <el-select
                  style="width: 150px"
                  v-model="dataForm.state"
                  placeholder="请选择"
                  clearable
                >
                  <el-option value="13" label="履约中"></el-option>
                  <el-option value="14" label="自评中"></el-option>
                  <el-option value="15" label="评价中"></el-option>
                  <el-option value="16" label="他评完成"></el-option>
                  <el-option value="17" label="结果汇总中"></el-option>
                  <el-option value="18" label="领导审核中"></el-option>
                  <el-option value="19" label="领导审核完成"></el-option>
                  <el-option value="20" label="审核结束"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间">
                <el-date-picker
                  style="width: 240px"
                  v-model="times"
                  type="daterange"
                  range-separator="至"
                  value-format="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button
                  icon="el-icon-search"
                  type="primary"
                  class="marginLeft"
                  @click="getDataList()"
                  >检索
                </el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
        <div class="avue-crud">
          <div
            class="flex"
            style="
              justify-content: space-between;
              border-top: 1px solid #b0bde2;
              padding-top: 10px;
            "
          >
            <div></div>
            <div class="pull-right">
              <el-button
                type="primary"
                @click="exportBtn"
                plain
                v-loading.fullscreen.lock="fullscreenLoading"
                >批量导出</el-button
              >
            </div>
          </div>
          <el-table
            style="width: 100%; margin-top: 10px"
            :data="dataList"
            border
            ref="table"
            v-loading="dataListLoading"
          >
            <el-table-column
              type="selection"
              width="55"
              header-align="center"
              align="center"
            ></el-table-column>
            <el-table-column
              type="index"
              width="80"
              header-align="center"
              align="center"
              label="序号"
            ></el-table-column>
            <el-table-column
              prop="workAssignName"
              header-align="center"
              align="center"
              min-width="200"
              show-overflow-tooltip
              label="任务书名称"
            >
              <template slot-scope="scope">
                <span
                  @click="checkDetails(scope.row)"
                  style="color: #0e258c; cursor: pointer"
                  >{{ scope.row.workAssignName }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="userName"
              header-align="center"
              align="center"
              min-width="120"
              show-overflow-tooltip
              label="被考核人编号"
            >
            </el-table-column>
            <el-table-column
              prop="ryName"
              header-align="center"
              align="center"
              min-width="120"
              show-overflow-tooltip
              label="被考核人姓名"
            >
            </el-table-column>
            <el-table-column
              prop="userDeptName"
              header-align="center"
              align="center"
              min-width="120"
              show-overflow-tooltip
              label="被考核人单位"
            >
            </el-table-column>
            <!-- <el-table-column
              prop="userZj"
              header-align="center"
              align="center"
              label="被考核人职级"
              min-width="180"
              show-overflow-tooltip
            >
            </el-table-column> -->
            <el-table-column
              prop="userZw"
              header-align="center"
              align="center"
              min-width="180"
              show-overflow-tooltip
              label="被考核人岗位"
            >
            </el-table-column>
            <el-table-column
              prop="stateExplain"
              header-align="center"
              align="center"
              min-width="100"
              show-overflow-tooltip
              label="状态"
            >
            </el-table-column>
            <el-table-column
              prop="finalScore"
              header-align="center"
              align="center"
              min-width="120"
              label="最终得分"
            >
            </el-table-column>
          </el-table>
        </div>
        <div class="avue-crud__pagination">
          <el-pagination
            @size-change="sizeChangeHandle"
            @current-change="currentChangeHandle"
            :current-page="pageIndex"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            :total="totalPage"
            background
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </basic-container>
    <cheekEdit ref="cheekEdit" @childevent="childevent"></cheekEdit>
  </div>
</template>

<script>
import {
  getPageForRwck,
  chakanExportExcel,
} from "@/api/hetongrenwu/book/bookCheek";
import { mapGetters } from "vuex";
import cheekEdit from "./cheekEdit";
export default {
  components: {
    cheekEdit,
  },
  created() {
    this.getDataList();
  },
  data() {
    return {
      dataForm: {},
      times: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      searchadvanced: true,
      searchheight: "0",
      tableShow: true,
      showType: 1,
      fullscreenLoading: false,
      shows: true,
    };
  },
  computed: {
    ...mapGetters(["permissions"]),
  },
  methods: {
    exportBtn() {
      var ids = [];
      var data = this.$refs.table.selection;
      data.forEach((ele) => {
        ids.push(ele.id);
      });
      var filename = "";
      if (ids.length > 1) {
        filename = "任务书查看.zip";
      } else {
        filename = "任务书查看" + data[0].workAssignName + ".xlsx";
      }
      chakanExportExcel({ ids: ids, type: 0 }).then((response) => {
        this.$message.closeAll();
        this.$message.success("导出成功!");
        let url = window.URL.createObjectURL(new Blob([response.data]));
        let link = document.createElement("a");
        link.style.display = "none";
        link.href = url;
        link.setAttribute("download", filename);
        document.body.appendChild(link);
        link.click();
      });
    },
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if (this.searchadvanced) {
        this.searchheight = "auto";
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      getPageForRwck(
        Object.assign(
          {
            current: this.pageIndex,
            size: this.pageSize,
            startDate: this.times[0],
            endDate: this.times[1],
          },
          this.dataForm
        )
      ).then((response) => {
        this.dataList = response.data.data.records;
        this.totalPage = response.data.data.total;
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    //编辑查看
    checkDetails(row) {
      this.$refs.cheekEdit.init(row);
      this.shows = false;
    },
    childevent() {
      this.getDataList();
      this.shows = true;
    },
  },
};
</script>
<style lang="scss">
.ck {
  .form-inline {
    .el-date-editor {
      background: linear-gradient(45deg, #f4f4fc, #f5f5f5);
      .el-range-input {
        background: linear-gradient(45deg, #f4f4fc, #f5f5f5);
      }
      .el-range-separator {
        margin: 0 10px;
      }
    }
  }
}
</style>
